<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="position: relative; top: 47px;  left: 260px;"
          class="button"
          @click="searchPmsSkuInList()"
          type="primary"
          size="small"
        >查询结果</el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
          <el-form-item label="输入搜索：">
            <el-input style="width: 203px" v-model="listQuery.productName" placeholder="商品名称"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>

      <el-button
        style="position: absolute;top: 244px;left: 320px;"
        type="primary"
        icon="el-icon-plus"
        class="btn-add"
        @click="addPmsSkuIn()"
        size="mini"
      >添加</el-button>

      <!--  v-hasPermi="['platform:tenant:edit']" -->
      <el-button
        style="position: absolute;top: 244px;left: 400px;"
        type="success"
        icon="el-icon-edit"
        size="mini"
        :disabled="single"
        @click="handleAmend"
      >修改</el-button>
    </el-card>

    <el-row class="table-container">
      <el-table
        ref="pmsSkuInTable"
        :data="list"
        style="width: 100%;"
        @selection-change="handleSelectionChange"
        v-loading="listLoading"
        border
      >
        <el-table-column type="selection" width="60" align="center"></el-table-column>

        <!-- 
                                
                            <el-table-column prop="id"
                                             label="入库记录ID">
                                <template slot-scope="scope">
                                    {{scope.row.id }}
                                </template>
                            </el-table-column>


                            <el-table-column prop="productId"
                                             label="商品ID">
                                <template slot-scope="scope">
                                    {{scope.row.productId }}
                                </template>
                            </el-table-column>

        -->

        <el-table-column prop="innum" label="进货单编号">
          <template slot-scope="scope">
            <router-link to>{{scope.row.innum }}</router-link>
          </template>
        </el-table-column>

        <!-- 
                                <el-table-column prop="productCategoryId"
                                             label="商品类别">
                                <template slot-scope="scope">
                                    {{scope.row.productCategoryId }}
                                </template>
                            </el-table-column>
        -->

        <el-table-column prop="operName" label="操作人">
          <template slot-scope="scope">
            <router-link to="/prm/pmsSkuInXg">{{scope.row.operName }}</router-link>
          </template>
        </el-table-column>

        <el-table-column prop="operTime" label="操作时间">
          <template slot-scope="scope">{{scope.row.operTime }}</template>
        </el-table-column>

        <!--
                                <el-table-column prop="originalPrice"
                                             label="商品售价">
                                <template slot-scope="scope">
                                    {{scope.row.originalPrice }}
                                </template>
                            </el-table-column>
        -->

        <el-table-column prop="supplierName" label="供应商">
          <template slot-scope="scope">{{scope.row.supplierName }}</template>
        </el-table-column>

        <el-table-column prop="status" label="审核状态">
          <!-- {{scope.row.operName }} -->
          <template slot-scope="scope">
            <el-tag
              :type="tenantMerchantStatusTagType(scope.row.status)"
              disable-transitions
              v-text="tenantMerchantStatusFormat(scope.row.status)"
            ></el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleUpdate(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>

        <!-- <el-table-column prop="operTime" label="操作日期">
          <template slot-scope="scope">{{scope.row.operTime |formatCreateTime}}</template>
        </el-table-column>-->

        <!-- 
                                <el-table-column prop="updateBy"
                                             label="更新人">
                                <template slot-scope="scope">
                                    {{scope.row.updateBy }}
                                </template>
                            </el-table-column>


                            <el-table-column prop="updateTime"
                                             label="更新日期">
                                <template slot-scope="scope">
                                    {{scope.row.updateTime }}
                                </template>
                            </el-table-column>


                            <el-table-column prop="storeId"
                                             label="所属店铺id">
                                <template slot-scope="scope">
                                    {{scope.row.storeId }}
                                </template>
                            </el-table-column>


                            <el-table-column prop="storeName"
                                             label="所属店铺名称">
                                <template slot-scope="scope">
                                    {{scope.row.storeName }}
                                </template>
                            </el-table-column>
                               <el-table-column label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleUpdate(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
        -->
      </el-table>
    </el-row>

    <el-dialog :title="title" :visible.sync="open" width="1000px">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <!--提示-->
        <el-alert style="margin-bottom: 15px" title="如果要修改请点击修改信息进行修改" show-icon type="warning"></el-alert>

        <!--进货单编号-->
        <el-col :span="8">
          <el-form-item label="进货单编号" prop="name" label-width="150px">
            <el-input
              v-model="form.agent_num"
              placeholder="请输入进货单编号"
              :disabled="form.agent_num != undefined && form.id != undefined"
            />
          </el-form-item>
        </el-col>
        <!--进货单编号-->

        <!-- 操作人 -->
        <el-col :span="8">
          <el-form-item label="操作人" prop="name" label-width="150px">
            <el-input
              v-model="form.name"
              placeholder="请输入操作人"
              :disabled="form.name != undefined && form.id != undefined"
            />
          </el-form-item>
        </el-col>
        <!-- 操作人 -->

        <!-- 操作时间 -->
        <el-col :span="8">
          <el-form-item label="操作时间" prop="name" label-width="150px">
            <el-input
              v-model="form.time"
              placeholder="请输入操作时间"
              :disabled="form.time != undefined && form.id != undefined"
            />
          </el-form-item>
        </el-col>
        <!-- 操作时间 -->

        <!-- 供应商 -->
        <el-col :span="8">
          <el-form-item label="供应商" prop="suppier" label-width="150px">
            <el-input
              v-model="form.suppier"
              placeholder="请输入供应商"
              :disabled="form.suppier != undefined && form.id != undefined"
            />
          </el-form-item>
        </el-col>
        <!-- 供应商 -->

        <!-- 商品名称 -->
        <el-col :span="8">
          <el-form-item label="商品名称" prop="tenant_name" label-width="150px">
            <el-input v-model="form.tenant_name" placeholder="请输入商品名称" />
          </el-form-item>
        </el-col>
        <!-- 商品名称 -->

        <!-- 商品名称 -->
        <el-col :span="8">
          <el-form-item label="进价" prop="tenant_price" label-width="150px">
            <el-input v-model="form.tenant_price" placeholder="请输入商品名称" />
          </el-form-item>
        </el-col>
        <!-- 商品名称 -->

        <!-- 进货数量 -->
        <el-col :span="8">
          <el-form-item label="进货数量" prop="tenant_small" label-width="150px">
            <el-input v-model="form.tenant_small" placeholder="请输入进货数量" />
          </el-form-item>
        </el-col>
        <!-- 进货数量 -->

        <!-- 操作人姓名 -->
        <el-col :span="8">
          <el-form-item label="操作人姓名" prop="tenant_person" label-width="150px">
            <el-input v-model="form.tenant_person" placeholder="操作人姓名" />
          </el-form-item>
        </el-col>
        <!-- 操作人姓名 -->

        <!-- 操作人时间 -->
        <el-col :span="8">
          <el-form-item label="操作时间" prop="tenant_time" label-width="150px">
            <el-input v-model="form.tenant_time" placeholder="操作人时间" />
          </el-form-item>
        </el-col>
        <!-- 操作人时间 -->

        <!-- 进货单编号 -->
        <el-col :span="8">
          <el-form-item label="进货单编号" prop="tenant_number" label-width="150px">
            <el-input v-model="form.tenant_number" placeholder="进货单编号" />
          </el-form-item>
        </el-col>
        <!-- 进货单编号 -->

        <!-- 商品国际码 -->
        <el-col :span="8">
          <el-form-item label="商品国际码" prop="tenant_code" label-width="150px">
            <el-input v-model="form.tenant_code" placeholder="商品国际码" />
          </el-form-item>
        </el-col>
        <!-- 商品国际码 -->

        <!-- 商品自助码 -->
        <el-col :span="8">
          <el-form-item label="商品自助码" prop="tenant_self" label-width="150px">
            <el-input v-model="form.tenant_self" placeholder="商品自助码" />
          </el-form-item>
        </el-col>
        <!-- 商品自助码 -->

        <!-- 商品助记码 -->
        <el-col :span="8">
          <el-form-item label="商品助记码" prop="tenant_mn" label-width="150px">
            <el-input v-model="form.tenant_mn" placeholder="商品助记码" />
          </el-form-item>
        </el-col>
        <!-- 商品助记码 --


        <!- 审核状态-->
        <el-col :span="8" style="position: relative;left:82px;">
          <el-form-item label="审核状态">
            <el-radio-group v-model="form.negative">
              <el-radio :label="1">审核</el-radio>
              <el-radio :label="0">未审核</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <!-- 审核状态 -->

        <!-- 修改 -->
        <!-- 弹出框列表 -->
        <!-- <el-table v-loading="loading" :data="tenantList" @selection-change="handleSelectionPopop">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="商品名称" align="center" prop="tenant_name" />
          <el-table-column label="商品分类名称" align="center" prop="tenant_merchant" />
          <el-table-column label="进价" align="center" prop="tenant_price" />
          <el-table-column label="进货数量" align="center" prop="tenant_amount" />
          <el-table-column label="操作人姓名" align="center" prop="tenant_card" />
          <el-table-column label="操作人时间" align="center" prop="tenant_time" />
          <el-table-column label="进货单编号" align="center" prop="tenant_number" />
          <el-table-column label="商品国际码" align="center" prop="tenant_country" />
          <el-table-column label="商品自主码" align="center" prop="tenant_act" />
          <el-table-column label="商品助记码" align="center" prop="tenant_note" />
          <el-table-column label="审核状态" align="center" prop="tenant_check" />
        </el-table>-->

        <!-- 弹出框列表 -->
      </el-form>
      <div slot="footer" class="dialog-footer" style="padding-top:20px" v-show="!is_look">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- <el-dialog :title="title" :visible.sync="sync_open" width="780px">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane label="修改信息" name="first">
            <el-alert style="margin-bottom: 15px" title="如果要修改请点击修改信息进行修改" show-icon type="warning"></el-alert>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-dialog>-->

    <div class="batch-operate-container"></div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="listQuery.pageSize"
        :page-sizes="[5,10,15]"
        :current-page.sync="listQuery.pageNum"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
//将$都替换为$
import { fetchList, deletePmsSkuIn, updatePmsSkuIn,createPmsSkuIn,getDicts } from "@/api/prm/pmsSkuIn";

import { formatDate } from "@/utils/date";

export default {
  name: "pmsSkuInList",
  data() {
    return {
      // 点击修改弹出
      loading: false,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 修改按钮弹出框
      sync_open: false,
      operates: [],
      // 查询参数
      status: undefined,
      // 商户审核状态
      form: {},
      rules: {},
      // 默认选中的tabname
      activeName: "first",
      // 是否弹出查看
      is_look: false,
      // 全选按钮
      single: true,

      tenantMerchantStatusOptions: [],
      operateType: null,
      listQuery: {
        productName: null,
        pageNum: 1,
        pageSize: 10
      },
      // 查询列表
      list: [],
      // 弹出框所有的列表
      tenantList: [],
      total: null,
      listLoading: true,
      multipleSelection: []
    };
  },
  created() {
    this.getList();
    // 获取字典数据-商户审核状态
    // getDicts("platform_tenant_merchant_status").then(response => {
    //   this.tenantMerchantStatusOptions = response.data;
    // });
  },
  filters: {
    formatCreateTime(time) {
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },

    formatStatus(value) {
      if (value === 1) {
        return "未开始";
      } else if (value === 2) {
        return "活动中";
      } else if (value === 3) {
        return "已结束";
      } else if (value === 4) {
        return "已失效";
      }
    }
  },
  methods: {
    // 查看列表
    getList() {
      this.listLoading = true;
      fetchList(this.listQuery).then(response => {
        console.log(response);
        this.listLoading = false;
        this.list = response.data.records;
        this.total = response.data.total;
        this.totalPage = response.data.pages;
        this.pageSize = response.data.size;
      });
    },

    // 表单重置
    reset() {
      this.form = {
         mastatus: "1",
        status:"1",
        agent_num: undefined,
        name: undefined,
        time: undefined,
        suppier: undefined,
        // negative:"1"
        tenant_name: undefined,
        tenant_price: undefined,
        tenant_small: undefined,
        tenant_person: undefined,
        tenant_time: undefined,
        tenant_code: undefined,
        tenant_self: undefined,
        tenant_mn: undefined
      };
    },
    // 审核状态
    tenantMerchantStatusTagType(status) {
      const tenantMastatus = this.tenantMerchantStatusFormat(status);
      if (tenantMastatus == "待审核") {
        return "primary";
      }
      return "success";
    },
    tenantMerchantStatusFormat(status) {
      if(status==0) return "已审核"
      // return this.selectDictLabel(this.tenantMerchantStatusOptions, status);
    },
    // 审核状态

    // 查看
    handleLook() {
      this.$router.push({ path: "/prm/updatePmsSkuIn",query:{id:row.id} });
      // this.open = true;
    },
    // 修改
    handleAmend() {
      this.sync_open = true;
      console.log("123");
    },

    // 添加按钮

    addPmsSkuIn() {
      this.reset(), 
      // (this.open = true);
      this.title = "添加平台租户";
      //手动将router,改成$router
      this.$router.push({ path: "/prm/addPmsSkuIn" });
    },

    // 确定按钮
    submitForm() {
      this.$refs["form"].validate(valid => {
        // console.log(valid);
        if (valid) {
          if (this.form.innum != undefined) {
            updatePmsSkuIn(this.form).then(response => {
              if (code === 200) {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              } else {
                this.msgError(response.msg);
              }
            });
          } else {
            createPmsSkuIn(this.form).then(response => {
              if (code === 200) {
                this.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              } else {
                this.msgError(response.msg);
              }
            });
          }
        }
      });
    },

    // 取消按钮
    cancel() {
      this.open = false;
    },

    // 全选按钮触发
    handleSelectionChange(selection) {
      // this.multipleSelection = val;
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },

    handleSelectionPopop() {},
    // 编辑
    handleUpdate(index, row) {
      this.$router.push({ path: "/prm/updatePmsSkuIn", query: { id: row.id } });
    },
    handleDelete(index, row) {
      this.$confirm("是否要删除该类型", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deletePmsSkuIn(row.id).then(response => {
          console.log(response)
          this.$message({
            message: "删除成功",
            type: "success",
            duration: 1000
          });
          this.getList();
        });
      });
    },

    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    searchPmsSkuInList() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    handleBatchOperate() {
      console.log(this.multipleSelection);
      if (this.multipleSelection < 1) {
        this.$message({
          message: "请选择一条记录",
          type: "warning",
          duration: 1000
        });
        return;
      }
      let showStatus = 0;
      if (this.operateType === "showPmsSkuIn") {
        showStatus = 1;
      } else if (this.operateType === "hidePmsSkuIn") {
        showStatus = 0;
      } else {
        this.$message({
          message: "请选择批量操作类型",
          type: "warning",
          duration: 1000
        });
        return;
      }
      let ids = [];
      for (let i = 0; i < this.multipleSelection.length; i++) {
        ids.push(this.multipleSelection[i].id);
      }
      let data = new URLSearchParams();
      data.append("ids", ids);
      data.append("showStatus", showStatus);
      updateShowStatus(data).then(response => {
        this.getList();
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1000
        });
      });
    },

    // tab栏监听
    handleTabClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>


